<md-table-container>
    <table id="service-task-table" md-table>
        <thead md-head>
        <tr md-row>
            <th md-column>{/'TaskId' | translate/}</th>
            <!-- dm-doc-link has bug ,do not support translate-->
            <!--<th md-column dm-doc-link="https://github.com/docker/engine-api/blob/master/types/swarm/task.go#L8">{/'Task State' | translate/}</th>-->
            <th md-column>{/'Task State' | translate/}</th>
            <th md-column>{/'Node' | translate/}</th>
            <th md-column>{/'Container' | translate/}</th>
            <th md-column>{/'Created At' | translate/}</th>
            <th md-column>{/'Updated At' | translate/}</th>
            <th md-column>{/'Abnormal' | translate/}</th>
            <th md-column></th>
        </tr>
        </thead>
        <tbody md-body>
        <tr md-row
            ng-repeat-start="(key, value) in serviceTaskCtrl.tasks | orderBy: [serviceTaskCtrl.orderByRunning, '-UpdatedAt'] | groupBy: 'Slot || NodeID'">
            <td md-cell>{/key/}</td>
            <td md-cell>{/TASK_STATE[value[0].Status.State] | translate/}</td>
            <td md-cell>
                <a data-ui-sref="node.detail({node_id: value[0].NodeID})">{/serviceTaskCtrl.nodesMapping[value[0].NodeID].Description.Hostname/}</a>
            </td>
            <td md-cell>
                <a data-ui-sref="node.containerDetail({node_id: value[0].NodeID, container_id: value[0].Status.ContainerStatus.ContainerID})"
                   class="ellipsis">{/value[0].Status.ContainerStatus.ContainerID/}</a>
            </td>
            <td md-cell>{/value[0].CreatedAt | date: 'yyyy-MM-dd HH:mm:ss'/}</td>
            <td md-cell>{/value[0].UpdatedAt | date: 'yyyy-MM-dd HH:mm:ss'/}</td>
            <td md-cell></td>
            <td md-cell>
                <i class='fa fa-plus' ng-show="value.length > 1"
                   ng-class="{'fa-plus-square-o': !value[0].isCollapsed , 'fa-minus-square-o': value[0].isCollapsed}"
                   ng-click="value[0].isCollapsed = !value[0].isCollapsed">
                </i>
            </td>
        </tr>
        <tr md-row ng-repeat-end ng-repeat="task in value" ng-if="!$first" ng-show="value[0].isCollapsed">
            <td md-cell></td>
            <td md-cell>{/TASK_STATE[task.Status.State] | translate/}</td>
            <td md-cell>
                <a data-ui-sref="node.detail({node_id: task.NodeID})">{/serviceTaskCtrl.nodesMapping[task.NodeID].Description.Hostname/}</a>
            </td>
            <td md-cell>
                <a data-ui-sref="node.containerDetail({node_id: task.NodeID, container_id: task.Status.ContainerStatus.ContainerID})"
                   class="ellipsis">{/task.Status.ContainerStatus.ContainerID/}</a>
            </td>
            <td md-cell>{/task.CreatedAt | date: 'yyyy-MM-dd HH:mm:ss'/}</td>
            <td md-cell>{/task.UpdatedAt | date: 'yyyy-MM-dd HH:mm:ss'/}</td>
            <td md-cell><p>{/task.Status.Err/}</p></td>
            <td md-cell></td>
        </tr>
        </tbody>
    </table>
</md-table-container>
